﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>出入库对比 - 全部物料</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 15px;
            background-color: #fff;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .chart-container {
            background: white;
            margin-bottom: 20px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .chart {
            width: 100%;
            height: 400px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
        }
        .title {
            font-size: 14px;
            color: #333;
        }
        .legend {
            display: flex;
            gap: 20px;
        }
        .legend-item {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #666;
        }
        .legend-color {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 6px;
        }
        .legend-inbound {
            background-color: #5CD4C8;
        }
        .legend-outbound {
            background-color: #8B7EC8;
        }
        .right-text {
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <!-- 趋势图 -->
    <div class="chart-container">
        <div class="header">
            <div class="legend">
                <div class="legend-item">
                    <span class="legend-color legend-inbound"></span>
                    <span>库存数量</span>
                </div>
            </div>
            <div class="right-text">库存趋势,全部物料</div>
        </div>
        <div id="trendChart" class="chart"></div>
    </div>

    <!-- 库存图 -->
    <div class="chart-container">
        <div class="header">
            <div class="legend">
                <div class="legend-item">
                    <span class="legend-color legend-inbound"></span>
                    <span>库存数量</span>
                </div>
            </div>
            <div class="right-text">库存数据,全部物料</div>
        </div>
        <div id="summaryChart" class="chart"></div>
    </div>

    <script>
        layui.use(['layer'], function(){
            var layer = layui.layer;
            
            // 确保DOM加载完成后再初始化图表
            $(document).ready(function() {
                // 初始化趋势图
                var trendChart = echarts.init(document.getElementById('trendChart'));
                var summaryChart = echarts.init(document.getElementById('summaryChart'));

                // 趋势图配置
                var trendOption = {
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line',
                            lineStyle: {
                                color: '#ccc',
                                width: 1
                            }
                        },
                        formatter: function(params) {
                            var result = params[0].axisValue + '<br/>';
                            params.forEach(function(item) {
                                result += '<span style="color:#5CD4C8">● </span>' + 
                                        item.seriesName + ': ' + item.value + '<br/>';
                            });
                            return result;
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: '#E0E0E0'
                            }
                        },
                        axisLabel: {
                            color: '#999'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#F5F5F5'
                            }
                        },
                        axisLabel: {
                            color: '#999',
                            formatter: function(value) {
                                if (value >= 1000000) {
                                    return (value / 1000000).toFixed(1) + 'M';
                                } else if (value >= 1000) {
                                    return (value / 1000) + 'k';
                                }
                                return value;
                            }
                        }
                    },
                    series: [{
                        name: '库存数量',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 6,
                        data: [],
                        itemStyle: {
                            color: '#5CD4C8'
                        },
                        lineStyle: {
                            color: '#5CD4C8',
                            width: 2
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(92,212,200,0.2)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(92,212,200,0)'
                                }]
                            }
                        }
                    }]
                };

                // 汇总图配置
                var summaryOption = {
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '15%',
                        top: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: '#E0E0E0'
                            }
                        },
                        axisLabel: {
                            color: '#999',
                            interval: 0,
                            rotate: 45
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '库存数量',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#F5F5F5'
                            }
                        },
                        axisLabel: {
                            color: '#999'
                        }
                    },
                    series: [{
                        name: '库存数量',
                        type: 'bar',
                        barWidth: '50%',
                        data: [],
                        itemStyle: {
                            color: '#5CD4C8'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#666'
                        }
                    }]
                };

                // 设置图表配置
                trendChart.setOption(trendOption);
                summaryChart.setOption(summaryOption);

                // 加载库存趋势折线图数据
                $.ajax({
                    url: '/IInboundCmparison/GetInventoryTrendData',
                    method: 'GET',
                    success: function(response) {
                        if (response.success && response.data) {
                            var xAxisData = response.data.map(function(item) { return item.storageDate; });
                            var seriesData = response.data.map(function(item) { return item.galleryNumber; });
                            
                            trendOption.xAxis.data = xAxisData;
                            trendOption.series[0].data = seriesData;
                            
                            // 更新图表
                            trendChart.setOption(trendOption);
                        }
                    },
                    error: function(xhr, status, error) {
                        layer.msg('获取库存趋势数据失败: ' + error);
                    }
                });

                // 加载库存柱状图数据
                $.ajax({
                    url: '/IInboundCmparison/GetInventoryBarData',
                    method: 'GET',
                    success: function(response) {
                        if (response.success && response.data) {
                            var xAxisData = response.data.map(function(item) { return item.productName; });
                            var seriesData = response.data.map(function(item) { return item.galleryNumber; });
                            
                            summaryOption.xAxis.data = xAxisData;
                            summaryOption.series[0].data = seriesData;
                            
                            // 更新图表
                            summaryChart.setOption(summaryOption);
                        }
                    },
                    error: function(xhr, status, error) {
                        layer.msg('获取库存数据失败: ' + error);
                    }
                });

                // 窗口大小改变时，重新调整图表大小
                window.addEventListener('resize', function() {
                    trendChart.resize();
                    summaryChart.resize();
                });
            });
        });
    </script>
</body>
</html>
